<template>

  <ul>
    <li v-for="(item, index) in datas" v-bind:key="item.name" :class="['tree-btn', $route.path.match(item.path)?'selected open':'' ]">

      <!-- 有下级菜单 -->
      <a v-if="item.children && item.children.length > 1" class="item-btn"  @click="openMenu($event)">
        <span class="icon el-icon-setting"></span>
        <i class="title">{{ item.title }}</i>
        <i class="arrow el-icon-arrow-right"></i>
      </a>

      <!-- 没有下级菜单 -->
      <router-link v-else :to="path + item.path" :class="['item-btn' ]" @click.native="openMenu($event)">
        <span class="icon el-icon-setting"></span>
        <span class="title">{{ item.title }}</span>
      </router-link>

      <!-- 递归 -->
      <tree v-if="item.children && item.children.length > 1" :datas="item.children" :path="path + item.path + '/' "></tree>

    </li>
  </ul>

</template>

<script>
    export default {
        name: "Tree",
        props: {
          datas: Array,
          path: String,
        },
        data() {
          return {

            selectedPath: '/',
          }
        },
        watch: {

          $route() {
            this.openOrFoldMenu();
          },

        },
        mounted() {

          this.selectedPath = this.$route.fullPath;

          // 页面加载完，获取当前路由，并展开侧边栏
          this.openOrFoldMenu();
        },
        methods: {

          // 展开或折叠
          openMenu(event) {

            let el = event.currentTarget;

            // 展开的侧边栏
            if ($(el).siblings('ul').length > 0) { // 有下级菜单

              $(el).siblings('ul').slideToggle('fast');
              $(el).parent().toggleClass('open');

              // 一级菜单，相邻的关闭
              let lis = $(el).parent().siblings('li');
              $(lis).each(function (idx, li) {
                $(li).removeClass('open').find('ul').first().slideUp('fast');
              });

              // 第一级折叠，里面的都折叠
              if (!$(el).parent().hasClass('selected')) {
                $(el).parent().find('li').removeClass('selected open');
                $(el).parent().find('li').find('ul').slideUp('fast');
              }
            }
            else { // 没有下级菜单

              $(el).parents('li').addClass('selected open').siblings('li').removeClass('selected open');
              $(el).parents().siblings('li').find('ul').slideUp('fast');
            }

            // 重复点击，刷新页面
            let path = $(el).attr('href');
            if (path && path.length>0) {

              if (this.selectedPath === path) {

                const { fullPath } = this.$route;

                // 先删除缓存页面
                this.$store.dispatch('delCachedView', this.$route).then(() => {
                  this.$nextTick(() => {
                    this.$router.replace({
                      path: '/redirect' + fullPath
                    })
                  })
                })
              }

              // 记录选中的路由
              this.selectedPath = path;
            }

          },

          // 展开相应的菜单
          openOrFoldMenu() {

            this.$nextTick(() => {

              let lis = $('#menu-view li');
              $(lis).each((idx, el) => {
                if ($(el).hasClass('selected open')) {
                  $(el).find('ul').first().slideDown('fast');

                  // 记录选中的路径
                  let path = $(el).children('a').attr('href');
                  if (path && path.length>0) {

                    // 后面修改，Vue事件执行顺序
                    setTimeout(() => {
                      this.selectedPath = path;
                    }, 100);
                  }
                }
                else {
                  $(el).find('ul').first().slideUp('fast');
                }
              })
            });
          },


        },



    }
</script>

<style scoped>

  @import "../style/leftMenu.css";


</style>
